<template>
	<view class="container">


		<view class="balance-info">
			<view>我的余额:</view>
			<view class="balance">${{ balance }}</view>
		</view>

		<view class="form">

			<view class="form-item">
				<text class="title">提现金额:</text>
				<view class="payouts">
					<text style="font-size: 50rpx;">￥</text>
					<input v-model="amount" type="number" placeholder="请输入提现金额" class="input" />
					<view class="payout" @click="withdrawAll">
						全部提现
					</view>
				</view>


			</view>

			<!-- <view class="agreement">

			</view> -->
			<view class="recharge-btn">
				<checkbox v-model="agreementChecked" />
				<text>我已经同意提现协议</text>
				<view class="btn" @click="submitWithdrawal">
					提现
				</view>
			</view>
			<!-- <button @click="submitWithdrawal" class="submit-button" :disabled="!agreementChecked">提交提现申请</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 500, // 用户余额
				amount: '', // 输入的提现金额
				agreementChecked: false, // 是否同意协议
			};
		},
		methods: {
			withdrawAll() {
				this.amount = this.balance.toString(); // 设置提现金额为余额
			},
			submitWithdrawal() {
				if (!this.amount || this.amount <= 0) {
					uni.showToast({
						title: '请填写有效的提现金额',
						icon: 'none',
					});
					return;
				}

				// 发送请求到后端进行提现操作
				uni.request({
					url: 'https://your-backend-api.com/withdraw', // 替换为你的后端API
					method: 'POST',
					data: {
						amount: this.amount,
					},
					success: (res) => {
						if (res.data.success) {
							uni.showToast({
								title: '提现申请提交成功',
								icon: 'success',
							});
							// 清空输入
							this.amount = '';
							this.agreementChecked = false;
						} else {
							uni.showToast({
								title: '提现申请提交失败',
								icon: 'none',
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败，请重试',
							icon: 'none',
						});
					},
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import 'Payouts.scss';
</style>